<!-- 令牌头部 -->
<template>
  <div class="token-head" :token="tokenInfo">
    <div class="token-title">
      <img src="~assets/images/token/token-logo.png" alt="">
      <div class="token-title-desc">
        <template v-if="superNodeName != null">
          <h4  :style="{fontSize: superNodeNameFontSize}">{{ superNodeName || '普通用户' }}</h4>
          <p>{{  superNodeName ? '旗下矿工' : '非矿工无法挖矿' }}</p>
        </template>
      </div>
      <template v-if="showSuperEntry && superNodeName != null">
        <div class="supernode-action" v-if="!superNodeName" @click="goMiner">加入超级节点</div>
        <!--<div class="supernode-action" v-if="superNodeName"  @click="showRefPopup('exitTokenPopup')">退出超级节点</div>
        <div class="supernode-action" v-else @click="goMiner">加入超级节点</div>-->
      </template>
    </div>
    <div class="token-data">
      <div class="token-total">
        <p>共计：{{ totalToken }}<span>块令牌</span></p>
        <div @click="$refs.tipPopup.show()"><img src="~assets/images/token/fq.png" alt=""></div>
        <div @click="freshData()" class="fresh" :class="{ing: freshIng}"><img src="~assets/images/token/fresh.png" alt="" @transitionend="freshIng=false"></div>
      </div>
      <div class="token-self" v-if="hasBorrow">自有的令牌数量：{{ selfToken }}块</div>
      <div class="token-self-status">
        <div class="total-item">
          <p>质押中</p>
          <i>{{ num.miningNum }}</i>
        </div>
        <p class="t-split"></p>
        <div class="total-item">
          <p>闲置中</p>
          <i>{{ num.idleNum }}</i>
        </div>
        <p class="t-split"></p>
        <div class="total-item">
          <p>出租中</p>
          <i>{{ num.rentNum }}</i>
        </div>
        <p class="t-split"></p>
        <div class="total-item">
          <p>出售中</p>
          <i>{{ num.saleNum }}</i>
        </div>
      </div>
      <div class="token-boroow" v-if="hasBorrow">租用的令牌数量：{{ borrowToken }}块</div>
      <div class="token-boroow-status" v-if="hasBorrow">
        <div class="total-item">
          <p>质押中</p>
          <i>{{ rentNum.miningNum }}</i>
        </div>
        <p class="t-split"></p>
        <div class="total-item">
          <p>闲置中</p>
          <i>{{ rentNum.idleNum }}</i>
        </div>
        <p class="t-split"></p>
        <div class="t-btn" v-if="rentNum.returnNum"><i v-if="rentNum.remainingTime">{{ rentNum.remainingTime }}</i>{{ rentNum.remainingTime ? '天' : '今天' }}后归还<i>{{ rentNum.returnNum }}</i>块</div>
      </div>
    </div>
    <!-- 申请成功提示框 -->
    <alert ref="joinSucTipPopup">
      <div class="join-suc">
        您的加入申请已递交给 <span>通宇资本</span> 超级节点 管理员，需要通过审核方可加入，在此之前 仍然可以申请加入其他超级节点。
      </div>
    </alert>
    <!-- 提示框 -->
    <alert ref="tipPopup" title="名词解释" cls="fq-popup">
      <div class="fq-wrap">
        <p>挖矿中：展示所有挖矿中令牌的数量</p>
        <p>闲置中：展示所有可动用的令牌数</p>
        <p>出租中：借给别人使用，别人在挖矿中的</p>
        <p>出售中：挂单出售，还未售出的</p>
        <h4>租用的令牌数量：通过平台租用他人的令牌</h4>
      </div>
    </alert>
    <!-- 退出超级节点-解除绑定 -->
    <alert ref="exitTokenPopup">
      <div class="exit-resume">
        请确认您是否需要<span>解除</span>与当前超级节点的绑定关系。如这样操作，您需要在结算前找到新的节点绑定，才不影响今日收益的结算，建议您先找好
      </div>
      <template v-slot:footer>
        <div class="exit-choose">
          <div @click="checkSecede">确定解除</div>
          <div @click="hideRefPopup('exitTokenPopup')">暂不解除</div>
        </div>
      </template>
    </alert>
    <!-- 您未满足以下退出超级节点条件 -->
    <alert ref="discontentPopup" title="您未满足以下退出超级节点条件">
      <div class="discontent-resume">
        <p class="res" :class="{un: checkInfo.conditions && checkInfo.conditions[0] == 0}">1.加入超级节点超过15天；</p>
        <p class="res" :class="{un: checkInfo.conditions && checkInfo.conditions[1] == 0}">2.我已绑定未挖矿的节点数量大于超级节点剩余可挖矿的节点数量或超级节点限制我的挖矿数量；</p>
        <p class="res" :class="{un: checkInfo.conditions && checkInfo.conditions[2] == 0}">3.我的所有节点的平均收益，低于该超级节点旗下所有矿工节点的平均收益；</p>
        <div class="pay-cvnt">
          <p class="pay-title">如强制退出，需支付</p>
          <div class="pay-price">{{ checkInfo.needPay >> 0 }}CVNT</div>
          <div class="pay-formula">（{{ checkInfo.mineCvnt >> 0}}CVNT*{{ checkInfo.ratio * 100 }}%）</div>
        </div>
      </div>
      <template v-slot:footer>
        <div class="exit-choose">
          <div @click="goPay(0)">强制退出</div>
          <div @click="hideRefPopup('discontentPopup')">我再想想</div>
        </div>
      </template>
    </alert>
    <!-- 您已满足以下退出超级节点条件 -->
    <alert ref="contentPopup">
      <template v-slot:header>
        <h4>您已满足以下退出超级节点条件</h4>
        <h4 style="margin-top: .3em">可无条件退出该超级节点<span style="opacity: 0">点条件</span></h4>
      </template>
      <div class="discontent-resume">
        <p class="res">1.加入超级节点超过15天；</p>
        <p class="res">2.我已绑定未挖矿的节点数量大于超级节点剩余可挖矿的节点数量或超级节点限制我的挖矿数量；</p>
        <p class="res">3.我的所有节点的平均收益，低于该超级节点旗下所有矿工节点的平均收益；</p>
      </div>
      <template v-slot:footer>
        <div class="exit-choose">
          <div @click="goPay(1)">确认退出</div>
          <div @click="hideRefPopup('contentPopup')">我再想想</div>
        </div>
      </template>
    </alert>
    <payment ref="payment" @verifySuc="onVerifySuc" :setTimeout="false"></payment>
    <short-msg-popup ref="shortMsgPopup" :data="{scene: 'secedeSuperNode'}" @submit="secede"></short-msg-popup>
  </div>
</template>

<script>
    import alert from 'cpnts/alert.vue'
    import { checkSecede, secede } from 'api'
    import payment from 'cpnts/payment.vue'
    import shortMsgPopup from 'cpnts/shortMsgPopup.vue'

  export default {
      components: {
          'payment': payment,
          'shortMsgPopup': shortMsgPopup,
          'alert': alert
      },
    props: {
          showSuperEntry: {
              type: Boolean,
              default: false
          },
        content: {
            type: String,
            default: '数据加载中..'
        }
    },
      // watch: {
      //     $route(nv,ov){
      //       let me = this
      //         console.log(me)
      //     }
      // },
      computed: {
          superNodeNameFontSize(){
              let {superNodeName} = this
              if(!superNodeName){
                  return
              }
              let l = superNodeName.length
              if(l < 7){
                  return '.48rem'
              }else {
                  let sl = 0
                  let ol = superNodeName.match(/[0-9A-Za-z]+/gi)
                  if(ol){
                      ol = ol.join('')
                      l = l - ol.length
                      sl += ol.length/2
                  }
                  ol = superNodeName.match(/[ ]+/g)
                  if(ol){
                      ol = ol.join('')
                      l = l - ol.length
                      sl += ol.length/4 * 3
                  }
                  sl = l + sl
                  return 6 / sl * .48 + 'rem'
              }

          },
          tokenInfo(){
              let token = this.$store.state.tokenInfo
              if(token){
                Object.assign(this, token)
              }
              return token
          },
          hasBorrow(){
              return this.borrowToken > 0
          },
        totalToken(){
            return this.selfToken + this.borrowToken
        },
          selfToken(){
            let {miningNum, idleNum, rentNum, saleNum} = this.num
            return miningNum +  idleNum + rentNum + saleNum
          },
          borrowToken(){
              let {miningNum, idleNum} = this.rentNum
              return miningNum +  idleNum
          }
      },
      created(){
          //this.freshData()
      },
      mounted(){
          //this.getData()
          //let obj = this.$refs.tipPopup
          this.$refs.tipPopup.hide()
          document.body.append(this.$refs.tipPopup.$el)
          //this.showRefPopup('joinSucTipPopup')
      },
    data(){
      return {
          checkInfo: {},
          freshIng: false,
          showPopup: false,
          //hasBorrow: true,
          "superNodeName": null,
          //"todayCanPledgeNum": 0,
          "num": {"idleNum": 0, "miningNum": 0, "rentNum": 0, "saleNum": 0},
          "rentNum": {"idleNum": 0, "miningNum": 0, "remainingTime": 0, "returnNum": 0},
          // "linux": {"pledgeNum": 0, "nodeNum": 0, "nodePledgeNum": 0, "tokenNum": 0, "tokenRentNum": 0},
          // "pc": {"pledgeNum": 0, "nodeNum": 0, "nodePledgeNum": 0, "tokenNum": 0, "tokenRentNum": 0},
          // "router": {"pledgeNum": 0, "nodeNum": 0, "nodePledgeNum": 0, "tokenNum": 0, "tokenRentNum": 0},
          // "notification": {"borrowStatus": 0, "leaseStatus": 0}
      }
    },
    methods: {
        goMiner(){
            this.$router.push({path: 'miner'});
        },
        goPay(check){
            this.showRefPopup('payment')
            if(check == 1){
                this.hideRefPopup('contentPopup')
            }else {
                this.hideRefPopup('discontentPopup')
            }
        },
        async secede(code){
            if(this.isSecedeing){
                return
            }
            this.isSecedeing = true
            let me = this
            try {
                let {data} = await secede({
                    code,
                    u: this.verifyToken
                })
                this.hideRefPopup('shortMsgPopup')
                this.$warn('退出成功!')
                this.$store.dispatch('getTokenInfo')
            } catch (e) {
                me.$warn(e.info)
            }
            this.isSecedeing = false
        },
        async checkSecede(){
            if(this.isCheckSecedeing){
               return
            }
            this.isCheckSecedeing = true
            let me = this
            try {
                let {data} = await checkSecede()
                this.checkInfo = data
                let {verifyOn, check} = data
                if(verifyOn == 0){
                  this.showRefPopup('contentPopup')
                } else {
                    if(check == 1){
                        this.showRefPopup('contentPopup')
                    } else {
                        this.showRefPopup('discontentPopup')
                    }
                }

            } catch (e) {
                me.$warn(e.info)
            }
            this.isCheckSecedeing = false
            this.hideRefPopup('exitTokenPopup')
            //this.showRefPopup('payment')
        },
        hideRefPopup(ref){
            this.$refs[ref].hide()

        },
          showRefPopup(ref){
              this.$refs[ref].show()
          },
          async freshData(){
              if(!this.freshIng){
                  this.freshIng = true
                  this.$emit('fresh')
              }
              // if(this.isFreshData){
              //     return
              // }
              // this.isFreshData = true
              // await this.$store.dispatch('getTokenInfo')
              // this.isFreshData = false
          },
        onVerifySuc(data){
            this.hideRefPopup('payment')
            this.showRefPopup('shortMsgPopup')
            this.verifyToken = data.u
        },
    }
  }
</script>

<style lang="scss" scoped>
  @import "~common/scss/variable";
  @import "~common/scss/mixin";
  .token-head {

    background: url("~assets/images/token/token-banner.png") no-repeat center top;
    background-size: 100% auto;
    line-height: 1.31;
  }


  .token-title {
    padding-top: 46px;
    padding-left: 75px;
    display: flex;
    position: relative;
    img {
      width: 150px;
      height: 196px;
      margin-right: 36px;
    }
  }

  .token-title-desc {
    padding-top: 2px;
    h4 {
      font-size:36px;
      font-weight:600;
      color:rgba(255,255,255,1);
      text-shadow:0px 2px 2px rgba(1,30,81,0.5);
      margin-bottom: 15px;
    }
    p {
      font-size:30px;
      color:rgba(252,223,173,1);

    }
  }

  .token-data {
    //width:690px;
    //height:450px;
    background:rgba(255,255,255,1);
    box-shadow:0px 1px 2px 0px rgba(10,29,87,0.2);
    border-radius:14px;
    margin: -80px 30px 0 30px;
  }

  .token-total {
    align-items: center;
    //justify-content: center;
    display: flex;
    font-size:36px;
    font-weight:600;
    color:rgba(54,77,186,1);
    p {
      font-weight:600;
      span {
        font-weight:600;
        font-size: 22px;
      }
    }
    padding: 30px 0 30px 231px;
    //margin-bottom: 10px;
    div {
      display: flex;
      @include extend-click();
    }
    img {
      margin-left: 24px;
      width: 36px;
      height: 36px;
    }
  }

  .fresh {

    img {
      transform: rotate(0);
    }
    &.ing {
      img {
        transition: all 1s ease;
        transform: rotate(180deg);
        transform-origin: 50% 50%;
      }
    }
  }

  .token-self {
    font-size:30px;
    color:rgba(134,144,208,1);

    padding:  0 0 0 52px;
  }

  .total-item {
    text-align: center;
    p {
      margin-bottom: 24px;
      font-size:24px;
      color:rgba(113,118,140,1);

    }
    i {
      font-style: normal;
      font-size:40px;
      font-weight:600;
      color:rgba(32,44,91,1);

    }
  }

  .token-self-status {
    display: flex;
    align-items: center;
    //margin: 0 24px;
    padding: 24px 4px;
    .total-item {
      flex: 1;
    }

  }

  .t-split {
    width:2px;
    height:84px;
    background:rgba(244,244,244,1);
  }

  .token-boroow {
    border-top: 2px solid #F4F4F4;
    margin: 0 24px;
    padding: 24px 0 0 24px;
    font-size:30px;
    color:rgba(134,144,208,1);

  }

  .token-boroow-status {
    display: flex;
    align-items: center;
    //margin: 0 24px;
    padding:  24px 0;
    .total-item {
      width: 170px;
    }
  }

  .t-btn {
    width:264px;
    height:68px;
    border:2px solid rgba(134,144,208,1);
    border-radius:8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:30px;
    color:#8690D0;

    margin-left: 43px;
    i {
      color: #EB3257;
      font-style: normal;
    }
  }


  .fq-wrap {
    font-size:30px;
    color:rgba(32,44,91,1);
    padding-top: 30px;
    p {
      width: 540px;
      margin: 0 auto 20px auto;
      text-align: left;
    }
    h4 {
      height: 83px;
      //border-top: 2px solid #F1F2F7;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      &:before{
        content: '';
        position: absolute;
        left: 16px;
        top: 0;
        width: calc(100% - 32px);
        height: 2px;
        background: #F1F2F7;
      }
    }
  }

  .supernode-action {
    width:208px;
    height:64px;
    border:2px solid rgba(255,255,255,1);
    border-radius:10px;
    font-size:30px;
    color:rgba(255,255,255,1);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 57px;
    right: 30px;
  }


  .exit-resume {
    font-size:26px;
    color:rgba(32,44,91,1);
    text-align: left;
    padding: 40px 64px 70px 64px;
    line-height:45px;
    span {
      color: #DC0630;
    }
  }


  .exit-choose {
    display: flex;
    height: 100%;
    div {
      flex: 1;
      border-right: 2px solid #D0D4E4;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }


  .discontent-resume {
    text-align: left;
    padding: 31px 53px 53px 53px;
    .res {
      font-size:28px;
      color:rgba(113,118,140,1);
      line-height:36px;
      margin-bottom: 30px;
      word-break: break-word;
    }
  }

  .pay-cvnt {
    text-align: center;
    margin-top: 51px;
  }

  .pay-title {
    font-size:28px;
    color:rgba(32,44,91,1);
    margin-bottom: 23px;
  }

  .pay-price {
    font-size:40px;
    font-weight:600;
    color:rgba(32,44,91,1);
    margin-bottom: 24px;
  }

  .pay-formula {
    font-size:22px;
    color:rgba(113,118,140,1);
  }

  .join-suc{
    font-size:30px;
    color:rgba(32,44,91,1);
    line-height:45px;
    padding: 15px 36px 10px 36px;
    text-align: left;
    span {
      font-weight: 600;
    }
  }

  .un {
    color: #DC0630 !important;
  }


</style>
<style lang="scss">
  .fq-popup {
    .m-alert {
      min-height: 430px;
    }
  }
</style>
